<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
    <style>
        .head {
            height: 6rem;
        }

        .banner {
            height: 8rem;
            background: linear-gradient(60deg, #2197f3 0, #00bbd4 50%, #019688 50%, #aed145 100%);
        }

        .h-hover:hover {
            color: darkgray !important;
        }
    </style>
</head>

<body>
    <div class="login">
        <div class="head row"></div>
        <div class="banner row"></div>
        <form class="container-lg d-flex flex-column align-items-center row-cols-2 m-auto" action="/dyp/loginServlet">
            <!-- 输入框组 -->
            <div class="input-group mb-3 mt-5 col-lg-6 col-sm-8 col-10">
                <!-- 图标 -->
                <label for="userName" class="input-group-append form-check-label">
                    <span class="input-group-text rounded-left">
                        <!-- 源文件 -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-people" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1h7.956a.274.274 0 0 0 .014-.002l.008-.002c-.002-.264-.167-1.03-.76-1.72C13.688 10.629 12.718 10 11 10c-1.717 0-2.687.63-3.24 1.276-.593.69-.759 1.457-.76 1.72a1.05 1.05 0 0 0 .022.004zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10c-1.668.02-2.615.64-3.16 1.276C1.163 11.97 1 12.739 1 13h3c0-1.045.323-2.086.92-3zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z" />
                        </svg>
                    </span>
                </label>
                <!-- 输入框 -->
                <input type="text" class="form-control rounded-right" placeholder="用户名" name="userName" id="userName">
            </div>
            <!-- 输入框组 -->
            <div class="input-group mb-2 col-lg-6 col-sm-8 col-10">
                <!-- 图标 -->
                <label for="pwd" class="input-group-append form-check-label">
                    <span class="input-group-text rounded-left">
                        <!-- 源文件 -->
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            class="bi bi-shield-lock" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M5.443 1.991a60.17 60.17 0 0 0-2.725.802.454.454 0 0 0-.315.366C1.87 7.056 3.1 9.9 4.567 11.773c.736.94 1.533 1.636 2.197 2.093.333.228.626.394.857.5.116.053.21.089.282.11A.73.73 0 0 0 8 14.5c.007-.001.038-.005.097-.023.072-.022.166-.058.282-.111.23-.106.525-.272.857-.5a10.197 10.197 0 0 0 2.197-2.093C12.9 9.9 14.13 7.056 13.597 3.159a.454.454 0 0 0-.315-.366c-.626-.2-1.682-.526-2.725-.802C9.491 1.71 8.51 1.5 8 1.5c-.51 0-1.49.21-2.557.491zm-.256-.966C6.23.749 7.337.5 8 .5c.662 0 1.77.249 2.813.525a61.09 61.09 0 0 1 2.772.815c.528.168.926.623 1.003 1.184.573 4.197-.756 7.307-2.367 9.365a11.191 11.191 0 0 1-2.418 2.3 6.942 6.942 0 0 1-1.007.586c-.27.124-.558.225-.796.225s-.526-.101-.796-.225a6.908 6.908 0 0 1-1.007-.586 11.192 11.192 0 0 1-2.417-2.3C2.167 10.331.839 7.221 1.412 3.024A1.454 1.454 0 0 1 2.415 1.84a61.11 61.11 0 0 1 2.772-.815z" />
                            <path
                                d="M9.5 6.5a1.5 1.5 0 0 1-1 1.415l.385 1.99a.5.5 0 0 1-.491.595h-.788a.5.5 0 0 1-.49-.595l.384-1.99a1.5 1.5 0 1 1 2-1.415z" />
                        </svg>
                    </span>
                </label>
                <!-- 输入框 -->
                <input type="password" class="form-control rounded-right" placeholder="密码" name="pwd" id="pwd">
            </div>
            <!-- 多选组 -->
            <div class="form-group d-flex align-items-center justify-content-around col-lg-6 col-sm-8 col-10">
                <!-- 自动登录 -->
                <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input btn-light" id="auto_login" name="auto_login">
                    <label for="auto_login" class="form-check-label">自动登录</label>
                </div>
                <!-- 记住密码 -->
                <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input btn-light" id="auto_pwd" name="auto_pwd">
                    <label for="auto_pwd" class="form-check-label">记住密码</label>
                </div>
                <!-- 找回密码 -->
                <a class="btn btn-sm h-hover p-0">找回密码</a>
            </div>
            <!-- 登录 -->
            <div class="form-group m-0 col-lg-6 col-sm-8 col-10">
                <input type="submit" class="btn-primary col-12 rounded p-2" value="安全登录">
            </div>
            <!-- 注册 or 扫码 -->
            <div class="form-group d-flex justify-content-between col-lg-6 col-sm-8 col-10">
                <a href class="btn p-0 h-hover btn-sm">注册账号？</a>
                <a href class="btn p-0 h-hover btn-sm">扫码登录</a>
            </div>
        </form>
    </div>

</body>

</html>